<template>
  <div :id="chart.id" />
</template>

<script>
export default {
  name: "G2Dashboard",
  props: {
    chart: {
      type: Object,
      default() {
        return {
          id: "d1",
          data: [{ value: 5.6 }]
        };
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    let Shape = G2.Shape;
    // 自定义Shape 部分
    Shape.registerShape("point", "pointer", {
      drawShape: function drawShape(cfg, group) {
        var center = this.parsePoint({
          // 获取极坐标系下画布中心点
          x: 0,
          y: 0
        });
        // 绘制指针
        group.addShape("line", {
          attrs: {
            x1: center.x,
            y1: center.y,
            x2: cfg.x,
            y2: cfg.y,
            stroke: cfg.color,
            lineWidth: 5,
            lineCap: "round"
          }
        });
        return group.addShape("circle", {
          attrs: {
            x: center.x,
            y: center.y,
            r: 5.75,
            stroke: cfg.color,
            lineWidth: 3.5,
            fill: "#fff"
          }
        });
      }
    });

    let color = ["#F5222D", "#FFBF00", "#0086FA"];
    const data = this.chart.data;
    const container = this.chart.id;
    const chart = new G2.Chart({
      container,
      forceFit: true,
      height: 260,
      padding: [0, 0, 30, 0]
    });
    chart.source(data);

    chart.coord("polar", {
      startAngle: (-9 / 8) * Math.PI,
      endAngle: (1 / 8) * Math.PI,
      radius: 0.75
    });
    chart.scale("value", {
      min: 0,
      max: 9,
      tickInterval: 1,
      nice: false
    });

    chart.axis("1", false);
    chart.axis("value", {
      zIndex: 2,
      line: null,
      label: {
        offset: -16,
        textStyle: {
          fontSize: 12,
          textAlign: "center",
          textBaseline: "middle"
        }
      },
      subTickCount: 4,
      subTickLine: {
        length: -8,
        stroke: "#fff",
        strokeOpacity: 1
      },
      tickLine: {
        length: -17,
        stroke: "#fff",
        strokeOpacity: 1
      },
      grid: null
    });
    chart.legend(false);
    chart
      .point()
      .position("value*1")
      .shape("pointer")
      .color("#1890FF")
      .active(false);

    let val = data[0].value;
    let lineWidth = 14;
    // 绘制仪表盘背景
    chart.guide().arc({
      zIndex: 0,
      top: false,
      start: [0, 0.92],
      end: [9, 0.92],
      style: {
        // 底灰色
        stroke: "#CBCBCB",
        lineWidth: lineWidth
      }
    });

    val >= 2 &&
      chart.guide().arc({
        zIndex: 1,
        start: [0, 0.92],
        end: [val, 0.92],
        style: {
          stroke: color[0],
          lineWidth: lineWidth
        }
      });

    val >= 5 &&
      chart.guide().arc({
        zIndex: 1,
        start: [2, 0.92],
        end: [4, 0.92],
        style: {
          stroke: color[1],
          lineWidth: lineWidth
        }
      });

    val > 5 &&
      val <= 10 &&
      chart.guide().arc({
        zIndex: 1,
        start: [4, 0.92],
        end: [val, 0.92],
        style: {
          stroke: color[2],
          lineWidth: lineWidth
        }
      });

    val > 2 &&
      val <= 5 &&
      chart.guide().arc({
        zIndex: 1,
        start: [2, 0.92],
        end: [val, 0.92],
        style: {
          stroke: color[1],
          lineWidth: lineWidth
        }
      });

    val < 2 &&
      chart.guide().arc({
        zIndex: 1,
        start: [0, 0.92],
        end: [val, 0.92],
        style: {
          stroke: color[0],
          lineWidth: lineWidth
        }
      });

    // 绘制指标数字
    chart.guide().html({
      position: ["50%", "95%"],
      html:
        '<div style="width: 300px;text-align: center;">' +
        '<p style="font-size: 20px; color: #545454;margin: 0;">处理率</p>' +
        '<p style="font-size: 36px;color: #545454;margin: 0;">' +
        data[0].value * 10 +
        "%</p>" +
        "</div>"
    });

    chart.render();
  }
};
</script>

<style lang="scss" scoped></style>
